// app/components/CustomHeader.tsx
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
interface IProps {
    title: string
    onBackPress: () => void
    rightComponent?: React.ReactNode
}
const CustomHeader = ({ title, onBackPress, rightComponent }: IProps) => {
    return (

        <LinearGradient colors={['#f4511e', '#ff6f61']} >
            <SafeAreaView style={styles.header}>
                <TouchableOpacity onPress={onBackPress} style={styles.backButton}>
                    <Ionicons name="arrow-back" size={24} color="#fff" />
                </TouchableOpacity>
                <View style={styles.title_content}><Text style={styles.title}>{title}</Text></View>
                <View style={{ width: 20 }} >
                    {rightComponent}
                </View>
            </SafeAreaView>
        </LinearGradient>


    );
};

const styles = StyleSheet.create({
    header: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%',
        paddingHorizontal: 16,
    },
    title: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    title_content: {
        flex: 1,
        textAlign: 'center'
    },
    backButton: {
        // padding: 10,
        alignItems: 'flex-start',
        alignContent: 'flex-start',
        alignSelf: 'flex-start',
    },
});

export default CustomHeader;